// 短句
<template>
  <div class="word">
    <Head />
    <div class="search">
      <p>{{ con.name }}</p>
      <p class="wen">
        <input type="text" placeholder="英汉互译词典输入框" />
        <img src="../assets/sousuo.png" class="pos" />
      </p>
      <img src="../assets/guanbi(1).png" @click="back()" />
    </div>
    <div class="con">
      <div class="page-bar left">
        <ul>
          <li v-if="list_in != stop">
            <a @click="before()" style="padding-left: 30%"
              ><img src="../assets/xiangshang.png"
            /></a>
          </li>
          <li v-else>
            <a class="banclick"><img src="../assets/xiangshang.png" /></a>
          </li>
          <li
            v-for="(item, index) in show_list"
            v-bind:class="{ active: list_in == index }"
            :key="index"
          >
            <a @click="select(index)" style="diplay: block">
              <p>{{ item.title }}</p>
              <p class="size">
                <span>条目{{ item.unit_total }}</span
                >- <span>已学{{ item.unit_work_total }}</span>
              </p></a
            >
          </li>
          <li v-if="start != list_in">
            <a @click="next()" style="padding-left: 30%"
              ><img src="../assets/xiangxia.png"
            /></a>
          </li>
          <li v-else>
            <a class="banclick"><img src="../assets/xiangxia.png" /></a>
          </li>
        </ul>
      </div>
      <div class="right">
        <div class="top">
          <p class="title">{{ con.title }}</p>
          <p class="ying">
            <span>{{ con.English }}</span>
            <span>{{ con.American }}</span>
          </p>
          <p class="yi">{{ con.desc }}</p>
          <p class="imgri">
            <img src="../assets/shangyige.png" @click="lastt()" />
            <img src="../assets/xiayige.png" @click="nextt()" />
          </p>
        </div>
        <audio
          id="audio"
          src="http://en.test.1demo.cc/uploads/music/60a4d518ccaa8.mp3"
          controls="controls"
        ></audio>
        <div class="btn">
          <button @click="audio()">点击播放</button>
          <button @click="biao()">点击标记</button>
          <button @click="audio()">点击重读</button>
        </div>
        <div class="bot">
          <!-- <p v-for="(item, index) in li" :key="index">{{ item.text }}</p> -->
          <p>{{ con.example }}</p>
          <p>{{ con.translate }}</p>
          <p>{{ con.else }}</p>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import axios from "axios";
import Head from "@/components/Head.vue";
import Footer from "@/components/Footer.vue";
export default {
  name: "Word",
  components: {
    Head,
    Footer,
  },
  data() {
    return {
      all: 5, //总页数
      cur: 0, //当前页码
      totalPage: 1, //当前条数
      list: [],
      con: {},
      show_list:[],
      list_in:0,
      start:12,
      stop:0,
      zonglis: [],
      indexs: 0,
      // 课程id
      course_id: "",
      //年级id
      grade_id: "",
      //类型id
      mold_id: "",
      //单元id
      unit_id: "1",
    };
  },
  created(){
    this.course_id = this.$route.query.course_id;
    this.grade_id = this.$route.query.grade_id;
    this.mold_id = this.$route.query.mold_id;
    // console.log(this.$route.query,'options')
    this.dataListFn();
    this.Wordread();
  },
  methods: {
    biao() {
      let a = this.con.id;
      console.log(a);
      
      axios.interceptors.request.use(
        (config) => {
          config.headers["token"] = localStorage.getItem("token");
          return config;
        },
        (error) => {
          // 请求报错时的操作
          // // console.log(error) // for debug
          return Promise.reject(error);
        }
      );

      axios.get("/api/index/sign", { params: { id: a } }).then((res) => {
        console.log(res);
      });
    },
    //请求数据
    Wordread() {
      let that = this;
      // console.log('123456789')
      axios.interceptors.request.use(
      (config) => {
        config.headers["token"] = localStorage.getItem("token");
        return config;
      },
      (error) => {
        // 请求报错时的操作
        // // console.log(error) // for debug
        return Promise.reject(error);
      }
    );
      axios
        .get("/api/SentRead/index", {
          params: { grade_id: this.grade_id, unit_id: this.unit_id },
        })
        .then((res) => {
          // that.list = res.data.data.jincheng.data.arr;
          // console.log(res.data.data, "111");
          // this.zonglis = res.data.data;

          that.con = res.data.data.neirong.data[0];
          // console.log(that.con, "111");
          this.zonglis = res.data.data.neirong.data;
          console.log(this.zonglis, "eawsredgfchb");
        });

      // axios.get("/api/Wordread/index").then((res) => {
      //   that.con = res.data.data.neirong[0];
      //   console.log(res.data.data, "111");
      //   this.zonglis = res.data.data;
      // });
    },
    dataListFn(index) {
      this.dellist();
      console.log(this.show_list);let that = this;
      console.log(index);
      console.log(this.grade_id, "this.grade_id");
      console.log(this.mold_id, "this.mold_id");
      console.log(this.course_id, "this.course_id");
      axios.interceptors.request.use(
      (config) => {
        config.headers["token"] = localStorage.getItem("token");
        return config;
      },
      (error) => {
        // 请求报错时的操作
        // // console.log(error) // for debug
        return Promise.reject(error);
      }
    );
      axios
        .get("/api/unit/index", {
          params: {
            grade_id: this.grade_id,
            mold_id: this.mold_id,
            course_id: this.course_id,
          },
        })
        .then((res) => {
          // that.list = res.data.data.jincheng.arr;
          that.list = res.data.data.danyuanjincheng.arr;
          console.log(that.list, "133");
          // this.zonglis = res.data.data;
          this.dellist();
        });
    },
    tiao() {
      let that = this;
      axios.interceptors.request.use(
      (config) => {
        config.headers["token"] = localStorage.getItem("token");
        return config;
      },
      (error) => {
        // 请求报错时的操作
        // // console.log(error) // for debug
        return Promise.reject(error);
      }
    );
      axios
        .get("/api/unit/index", {
          params: {
            grade_id: this.grade_id,
            mold_id: this.mold_id,
            course_id: this.course_id,
          },
        })
        .then((res) => {
          that.list = res.data.data.jincheng.data.total;
          console.log(res, "112");
        });
    },
    //分页
    select(index) {
      this.list_in = index;
      this.unit_id = this.list_in + 1;
      // console.log(this.list_in,'in')
      // console.log(this.unit_id,'this.unit_id')
      this.Wordread();
    },
    dellist(index, stop) {
      let arr = this.list;
      this.show_list = arr.slice(index || 0, stop || 6);
      console.log(this.show_list);
    },
    next() {
      this.list_in += 1;
      if (this.list_in == 6) {
        this.dellist(6, 12);
        this.list_in = 0;
        this.start = 5;
        this.stop = 12;
      }
      this.unit_id = this.list_in + 1;
      console.log(this.unit_id, "list_in");
      this.Wordread();
    },
    before() {
      this.list_in -= 1;
      if (this.start == 5 && this.list_in == -1) {
        this.dellist(0, 6);
        this.list_in = 5;
        this.start = 12;
        this.stop = 0;
      }
      this.unit_id = this.list_in + 1;
      // console.log(this.unit_id,'list_in')
      this.Wordread();
    },
    lastt() {
      let that = this;
      console.log(this.zonglis, 222);
      let inde = this.indexs - 1;
      console.log(inde);
      this.con = this.zonglis.neirong[inde];
      this.indexs = inde;
    },
    nextt() {
      let that = this;
      console.log(this.zonglis, 222);
      let inde = this.indexs + 1;
      console.log(inde);
      this.con = this.zonglis[inde];
      this.indexs = inde;
    },
    // btnClick: function (data) {
    //   //页码点击事件
    //   if (data != this.cur) {
    //     this.cur = data;
    //     console.log(this.cur);
    //   }
    //   //根据点击页数请求数据
    //   this.dataListFn(this.cur.toString());
    // },
    // pageClick: function () {
    //   console.log(this.cur);
    //   //根据点击页数请求数据

    //   // this.dataListFn(this.cur.toString());
    //   // console.log(this.cur.toString())
    // },
    back() {
      this.$router.push("index");
    },
    audio() {
      document.getElementById("audio").play();
      console.log(111);
    },
    // xia(){
    //   this.list.shift();
    //   document.getElementById('xia').innerHTML=list;
    //   // this.list.push("id+1");
    // },
  },
  watch: {
    list_in() {
      console.log(this.list_in);
    },
  },
  computed: {
    //分页
    // list: function () {
    //   var left = 1;
    //   var right = this.all;
    //   var ar = [];
    //   console.log(this.cur);
    //   if (this.all >= 5) {
    //     if (this.cur > 3 && this.cur < this.all - 2) {
    //       left = this.cur - 2;
    //       right = this.cur + 2;
    //     } else {
    //       if (this.cur <= 3) {
    //         left = 1;
    //         right = 5;
    //       } else {
    //         right = this.all;
    //         left = this.all - 4;
    //       }
    //     }
    //   }
    //   while (left <= right) {
    //     ar.push(left);
    //     left++;
    //   }
    //   return ar;
    // },
  },
  mounted() {
    let that = this;
    axios
      .get("api/GroupRead/index", { params: { id: 1 } })
      .then((res) => {
        that.con = res.data.data.neirong[0]; // console.log(that.con[0], "111");
      })
      .catch((err) => console.log(err));
  },
};
</script>

<style lang="scss" scoped>
#audio {
  display: none;
}
/*分页*/
.page-bar {
  margin: 40px auto;
  margin-top: 150px;

  .size {
    margin-bottom: 1rem;
  }
}
ul,
li {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
.page-bar li:first-child > a {
  margin-left: 0px;
}
.page-bar a {
  text-decoration: none;
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 2rem;
  color: #fff;
  cursor: pointer;
  width: 100%;
  // margin-right: 20px;
}
.page-bar a:hover {
  // background-color: #eee;
  color: #05d380;
}
.page-bar a.banclick {
  cursor: not-allowed;
  padding-left: 30%;
}

// .page-bar a.banclick img {
//   width: 80%;
// }
.page-bar .active a {
  color: #fff;
  cursor: default;
  color: #05d380;
}
.page-bar i {
  font-style: normal;
  color: #d44950;
  margin: 0px 4px;
  font-size: 12px;
}

.word {
  width: 100%;

  .search {
    width: 98%;
    padding: 0 1%;
    height: 40px;
    line-height: 40px;
    background-color: #3571ff;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding-bottom: 3px;

    .wen {
      width: 24%;
      position: relative;

      input {
        width: 100%;
        background: #ffffff;
        border-radius: 24px;
        border: 1px solid #fff;
        height: 28px;
        line-height: 28px;
        text-indent: 2.4em;
      }

      .pos {
        position: absolute;
        left: 6px;
        top: 13px;
        width: 4.5%;
      }
    }

    > img {
      width: 1%;
      height: 22px;
      margin-top: 8px;
    }
  }

  .con {
    width: 99%;
    margin-left: 1%;
    display: flex;
    justify-content: space-between;

    .left {
      width: 14%;
      background-color: #000;
      opacity: 0.7;
      color: #fff;
      margin-top: 0.6rem;

      .btn {
        img {
          width: 12%;
          // margin-left: 44%;
          margin: 1rem 44% 1rem;
        }
      }

      .list {
        margin: 2rem 0;
        margin-left: 20%;

        .size {
          font-size: 14px;
        }
      }
    }

    .right {
      width: 88%;
      // margin: 0 auto;
      background-color: #f5f5f5;
      padding-bottom: 6.4rem;

      .top {
        width: 92%;
        margin-left: 2%;
        padding-top: 3rem;
        overflow: hidden;
        background-color: #fff;
        padding-left: 3%;
        padding-bottom: 1rem;

        .title {
          font-size: 60px;
        }

        .ying {
          margin: 1.4rem 0;
        }

        .imgri {
          float: right;
          width: 10%;
          margin-top: 6rem;
          cursor: pointer;

          img:nth-child(2) {
            padding-left: 20%;
          }
        }
      }

      .btn {
        width: 80%;
        margin: 2rem 6% 2rem;
        justify-content: space-between;
        display: flex;

        button {
          width: 28%;
          line-height: 50px;
          color: #fff;
          border: 1px solid #fff;
          border-radius: 5px;
          font-size: 18px;
          outline: none;
          cursor: pointer;
        }

        button:nth-child(1) {
          background-color: #05d380;
        }

        button:nth-child(2) {
          background-color: #8556ec;
        }

        button:nth-child(3) {
          background-color: #f1cd51;
        }
      }

      .bot {
        width: 92%;
        margin-left: 2%;
        padding: 1rem 0;
        background-color: #fff;
        padding-left: 3%;

        p {
          line-height: 2rem;
        }
      }
    }
  }
}
</style>